<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img {
      width: 100%;
      height: 300px;
    }
  </style>
</head>

<body>
  <div id="box">
    <img data-src="./images/1.jpg" alt="">
    <img data-src="./images/2.jpg" alt="">
    <img data-src="./images/3.jpg" alt="">
    <img data-src="./images/4.jpg" alt="">
    <img data-src="./images/5.jpg" alt="">
    <img data-src="./images/6.jpg" alt="">
    <img data-src="./images/7.jpg" alt="">
    <img data-src="./images/8.jpg" alt="">
    <img data-src="./images/9.jpg" alt="">
    <img data-src="./images/10.jpg" alt="">
    <img data-src="./images/1.jpg" alt="">
    <img data-src="./images/2.jpg" alt="">
  </div>
  <script>
    // 图片懒加载的原理， 加载显示在视口范围内的图片地址
    //跟随页面的滚动 隐藏部分的图片在加载
    // 说白了就是延迟加载，比如我们加载一个页面，这个页面很长很长，长到我们的浏览器可视区域装不下，
    // 那么懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域在加载。
    var imgs = document.querySelectorAll('img');

    //offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
    function getTop(e) {  //获取图片距离顶部的高度
      var T = e.offsetTop;
      while (e = e.offsetParent) {
        T += e.offsetTop;
      }
      return T;
    }
    // 懒加载函数
    function lazyLoad(imgs) {
      var H = document.documentElement.clientHeight;//获取可视区域高度  
      var S = document.documentElement.scrollTop || document.body.scrollTop; //滚动高度
      for (var i = 0; i < imgs.length; i++) {
        if (H + S > getTop(imgs[i])) {
          imgs[i].src = imgs[i].getAttribute('data-src');
        }
      }
    }
    window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发
      lazyLoad(imgs);
    }




  </script>
</body>

</html>